<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>系统管理</el-breadcrumb-item>
      <el-breadcrumb-item>启动页面与图标</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card>
<el-row>

          <el-col :span="10">
              
            <label for="page">启动页图片设置（点击上传）</label>
          </el-col>
        </el-row>
        <el-row :gutter="20">
<el-col :span="4">

        <el-upload
          class="avatar-uploader"
          action="string"
          :http-request="UploadImage"
          :auto-upload="true"
          name="file"
          :show-file-list="false"
          list-type="picture"
          :multiple="false"
          :on-success="uploadSuccess"
          :on-error="uploadError"
          :before-upload="beforeUpload">
            <img v-bind:src= "logosrc" alt="Logo" width=200px height=200px>
            
         </el-upload>


      </el-col>

        </el-row>
      <el-divider></el-divider>
<el-row>

          <el-col :span="10">
              
            <label for="page">收藏地点图标设置（点击上传并修改，最多上传5个）</label>
          </el-col>
        </el-row>
        <el-row :gutter="20">
<el-col :span="4" v-for="icon in iconlist" >
<div @click="getIconIndex(icon)">
        <el-upload
          :id="icon.id"
          class="avatar-uploader"
          action="string"
          :http-request="UploadIcon"
          :auto-upload="true"
          name="file"
          :show-file-list="false"
          list-type="picture"
          :multiple="false"
          :on-success="uploadSuccess"
          :on-error="uploadError"
          :before-upload="beforeUpload">
            <img v-bind:src= "icon.url" alt="收藏地点图标1" width=150px height=150px>
            
         </el-upload>
</div>

      </el-col>

        </el-row>


    </el-card>

  </div>
</template>

<script>


export default {
  data () {
    return {
      // 查询条件
      // 时间起始

      nowconfig: {},
      logosrc:'',
      iconlist:[],
      // 标签列表
      configList: [],
      total: 0,
      uploadIcon:null,


    }
  },
  created () {
    // 加载页面时 加载一次数据
    this.getconfig ()
    this.geticon ()
    
  },
  methods: {
  
    //
    async getconfig () {
      var { data: res } = await this.$http.get('app/config')
      if (res.code !== 200) return this.$message.error('Error:' + res.message)
      if(res.code == 200){
          this.nowconfig = res.data
      }

       var { data: result } = await this.$http.get('minio/'+this.nowconfig.page)
      console.log(this.nowconfig.page)
      if (result.code !== 200) return this.$message.error('Error:' + result.message)
      this.logosrc = result.data
      
    },

    async geticon () {
      var { data: res } = await this.$http.get('minio/geticon')
      if (res.code !== 200) return this.$message.error('Error:' + res.message)
      if(res.code == 200){
          this.iconlist = null
          this.iconlist = res.data
      }
      
    },

    async getLogoId () {
      var { data: res } = await this.$http.get('minio/'+this.nowconfig.page)
      console.log(this.nowconfig.page)
      if (res.code !== 200) return this.$message.error('Error:' + res.message)
      this.logosrc = res.data
    },

    async updateconfig () {
      const { data: res } = await this.$http.post(
        'app/config',
        { 'page': this.nowconfig.page, 
        'platformAgreement': '',
        'privacyPolicy': ''
        }, {
          headers: {
            'content-type': 'application/json',
            'X-Request-With': 'XMLHttpRequest',
            'token': window.sessionStorage.getItem('token')
          }
        }
      )
      if (res.code !== 200) return this.$message.error('Error:' + res.message)
      this.showDialogVisible = false

      // this.nowconfig = res.data
      // console.log(res.data.records)
    },


//:http-request 使用该指令， :on-success, :on-error 指令是不会触发的
      async UploadIcon(param){

      const formData = new FormData()
      formData.append('file', param.file)
      formData.append('kind', 0)
      formData.append('account', "admin")
      formData.append('type', 3)
      formData.append('oid', this.uploadIcon.id)
      const { data: res } = await this.$http.post(
        'minio/updateicon',
        formData
      )
      let i =0

        if (res.code == 200) {
            this.$router.go(0)
        } else {
          this.$message.error("图片插入失败");
        }
    },
      beforeUpload() {
        // 显示loading动画
       
      },
      uploadSuccess(res, file) {
        
      },
      // 富文本图片上传失败
      uploadError() {
       
      },

    async UploadImage(param){
      const formData = new FormData()
      let that = this
      formData.append('file', param.file)
      formData.append('kind', 0)
      formData.append('account', "admin")
      formData.append('type', 0)
      const { data: res } = await this.$http.post(
        'minio/upload',
        formData
      )
        if (res.code == 200) {
          console.log(res.data)      

            this.nowconfig.page = res.data
            var { data: result } = await this.$http.get('minio/'+res.data)
            if (result.code !== 200) return this.$message.error('Error:' + result.message)
            this.logosrc = result.data
            console.log(this.logosrc)

const { data: resu } = await this.$http.post(
        'app/config',
        { 'page': that.nowconfig.page, 
        'platformUserAgreement': '废弃',
        'privacyPolicy': '废弃'
        }, {
          headers: {
            'content-type': 'application/json',
            'X-Request-With': 'XMLHttpRequest',
            'token': window.sessionStorage.getItem('token')
          }
        }
      )
      if (resu.code !== 200) return this.$message.error('Error:' + resu.message)









        } else {
          this.$message.error("图片插入失败");
        }


        

    },

    getIconIndex:function(icon){
      this.uploadIcon=icon
      console.log(this.uploadIcon)
    },


  },
  mounted (){
    
  },
  filters: {

  }
}
</script>

<style lang="less" scope>
.el-row {
    margin-top: 20px;
    margin-bottom: 0px;
    &:last-child {
      margin-bottom: 0;
    }
  }
.el-col {
    margin-left: 20px;
    border-radius: 4px;
  }
.grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
</style>
